@import './com';

header {
    width: vw(750);
    height: vw(526);
    .head_top {
        width: vw(750);
        height: vw(76);
        margin-top: vw(49);
        display: flex;
        justify-content: space-between;
        a {
            margin-left: vw(23);
            width: vw(127);
            height: vw(57);
            border: vw(1) solid $col;
            border-radius: vw(30);
            text-align: center;
            line-height: vw(57);
            font-size: vw(26);
        }
        span {
            margin-top: vw(17);
            font-size: vw(26);
            font-weight: bold;
        }
        .ema {
            position: relative;
            margin-top: vw(10);
            right: vw(23);
            img {
                width: vw(53);
                height: vw(53);
            }
            }
        }

    .head_ct {
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        img {
            margin-left: vw(23);
            width: vw(705);
            height: vw(260);
        }
        .ct_one {
            display: flex;
            justify-content: space-between;
            span {
                display: inline-block;
                margin-top: vw(16);
                margin-left: vw(47);
                font-size: vw(72);
                color: $col;
            }
            a {
                margin-top: vw(39);
                margin-right: vw(41);
                width: vw(113);
                height: vw(58);
                background-color: $col;
                border-radius: vw(30);
                text-align: center;
                line-height: vw(58);
                color: #fff;
            }
        }
    }

    .head_bt {
        margin-top: vw(43);
        display: flex;
        justify-content: space-between;
        .bt_one {
            display: flex;
            justify-content: center;
            margin-left: vw(48);
            img {
                width: vw(38);
                height: vw(35);
            }
            span {
                font-size: vw(30);
            }
            span:nth-of-type(2) {
                color: $col;
            }
        }

        a {
            margin-right: vw(38);
            font-size: vw(26);
            color: #8e8e8e;
        }
    }
    }

main {
    margin-top: vw(40);
    .main_top {
        display: flex;
        justify-content: space-between;
        margin-left: vw(48);
        background-color: $col;
        width: vw(665);
        height: vw(71);
        span:first-of-type {
            margin-left: vw(12);
            font-size: vw(30);
            line-height: vw(71);
            color: #fff;
        }
        span:nth-of-type(2) {

            margin-right: vw(10);
            font-size: vw(47);
            line-height: vw(71);
            color: #fff;
        }
    }


    .main_ct {
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        .main_box1 {
            display: flex;
            justify-content: space-between;
        .ct_one {
            margin-left: vw(47);
            margin-top: vw(10);
            display: flex;
            justify-content: center;
            .ct_one_box1 {
                position: relative;
                img {
                    width: vw(176);
                    height: vw(176);
                    z-index: 0;
                }
                &::before {
                    content: '正佳店';
                    display: inline-block;
                    position: absolute;
                    text-align: center;
                    top: vw(85);
                    left: 0;
                    background-color: #b6b3b2;
                    width: vw(177);
                    height: vw(37);
                    opacity: .8;
                }
            }

            .box1 {
                margin-left: vw(27);
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                a:first-of-type {
                    font-size: vw(30);
                }
                div {
                    display: flex;
                    justify-content: center;
                    img {
                        width: vw(38);
                        height: vw(35);
                    }
                    span {
                        font-size: vw(26);
                        color: #929292;
                    }
                }
                span:first-of-type {
                    font-size: vw(24);
                    color: #929292;
                }
                span:nth-of-type(2) {
                    font-size: vw(24);
                    color: $col;
                }
                
            }
            
            }

            .jinru {
                margin-top: vw(77);
                margin-right: vw(41);
                display: inline-block;
                width: vw(113);
                height: vw(58);
                background-color: $col;
                border-radius: vw(30);
                text-align: center;
                line-height: vw(58);
                color: #fff;
                }
        }

        .main_box2 {
            display: flex;
            justify-content: space-between;
        .ct_one {
            margin-left: vw(47);
            margin-top: vw(10);
            display: flex;
            justify-content: center;
            .ct_one_box1 {
                position: relative;
                img {
                    width: vw(176);
                    height: vw(176);
                    z-index: 0;
                }
                &::before {
                    content: '体育西店';
                    display: inline-block;
                    position: absolute;
                    text-align: center;
                    top: vw(85);
                    left: 0;
                    background-color: #b6b3b2;
                    width: vw(177);
                    height: vw(37);
                    opacity: .8;
                }
            }

            .box1 {
                margin-left: vw(27);
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                a:first-of-type {
                    font-size: vw(30);
                }
                div {
                    display: flex;
                    justify-content: center;
                    img {
                        width: vw(38);
                        height: vw(35);
                    }
                    span {
                        font-size: vw(26);
                        color: #929292;
                    }
                }
                span:first-of-type {
                    font-size: vw(24);
                    color: #929292;
                }
                span:nth-of-type(2) {
                    font-size: vw(24);
                    color: $col;
                }
                
            }
            
            }

            .jinru {
                margin-top: vw(77);
                margin-right: vw(41);
                display: inline-block;
                width: vw(113);
                height: vw(58);
                background-color: $col;
                border-radius: vw(30);
                text-align: center;
                line-height: vw(58);
                color: #fff;
                }
        }


        .main_box3 {
            display: flex;
            justify-content: space-between;
        .ct_one {
            margin-left: vw(47);
            margin-top: vw(10);
            display: flex;
            justify-content: center;
            .ct_one_box1 {
                position: relative;
                img {
                    width: vw(176);
                    height: vw(176);
                    z-index: 0;
                }
                &::before {
                    content: '昌岗店';
                    display: inline-block;
                    position: absolute;
                    text-align: center;
                    top: vw(85);
                    left: 0;
                    background-color: #b6b3b2;
                    width: vw(177);
                    height: vw(37);
                    opacity: .8;
                }
            }

            .box1 {
                margin-left: vw(27);
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                a:first-of-type {
                    font-size: vw(30);
                }
                div {
                    display: flex;
                    justify-content: center;
                    img {
                        width: vw(38);
                        height: vw(35);
                    }
                    span {
                        font-size: vw(26);
                        color: #929292;
                    }
                }
                span:first-of-type {
                    font-size: vw(24);
                    color: #929292;
                }
                span:nth-of-type(2) {
                    font-size: vw(24);
                    color: $col;
                }
                
            }
            
            }

            .jinru {
                margin-top: vw(77);
                margin-right: vw(41);
                display: inline-block;
                width: vw(113);
                height: vw(58);
                background-color: $col;
                border-radius: vw(30);
                text-align: center;
                line-height: vw(58);
                color: #fff;
                }
        }
    }
}

nav {
    position: sticky;
    bottom: 0;
    .bt_box{
        display: flex;
        justify-content: space-around;
        width: vw(750);
        height: vw(110);
        background-color: #fff;
        div {
            display: inline-block;
            width: vw(73);
            text-align: center;
            a {
                img {
                    width: vw(73);
                    height: vw(73);
                }
            }
        }
    }
}